<template>
  <div class="top-bar">
    <div class="wrap top-bar-wrap">
      <div class="l">欢迎来到叩丁狼积分商城</div>
      <div class="r">
                            
        <ul>
          <li>
            <img class="avatar" width="26" height="26" :src="userInfo.headImg" alt="">
            用户名：{{userInfo.nickName}}
          </li>
          <li>我的鸡腿：{{userInfo.coin}} </li>
          <li>获取鸡腿</li>
          <li>叩丁狼官网</li>
          <li class="login-btn" v-show="!isLogined" @click="toLogin">登录</li>
          <li class="cart-btn"  v-show="isLogined">
            <img src="../assets/img/cart.png" alt="">
            <span>购物车</span>
            <b>{{cartTotal}}</b>
          </li>
        </ul>

      </div>
    </div>
    
  </div>
</template>

<script>
import {mapMutations,mapState,mapActions} from "vuex"
import {WeixinLoginAPI} from "@/request/api"
export default {
  data () {
    return {
      // 购物车总数量
      // cartTotal:0,

     
    }
  },
  // watch:{
  //   "$route.path":{
  //     handler(newVal,oldVal){
  //       console.log("这个方法什么时候执行????",newVal,oldVal);
  //       // 切换路由的时候,更新用户状态
  //       let mytoken = localStorage.getItem("x-auth-token")
  //       // if(mytoken){
  //       //     this.chanIsLogined(true)
  //       // }else{
  //       //     this.chanIsLogined(false)
  //       // }
  //       this.chanIsLogined(Boolean(mytoken))
  //     }
  //   }
  // },
  // 路由切换的时候让TopBar组件重载,效果就是路由的切换也能够引起created的执行
  created(){
    // console.log("执行了topBar的created方法");

    this.$nextTick().then(async ()=>{
      //微信扫码登录核心代码 : 拿code置换token
      let mycode = this.$route.query.code;
      // console.log("mycode为:",this.$route.query);
      if(mycode){
          // 发起扫码登录请求
          let res = await WeixinLoginAPI({
            code:mycode
          });
          // --------------------------------
          // 以下为该项目的业务:
          if(res.code==0){
            // 扫码登录成功
            this.asyncChanIsShowToast({
                msg:"登录成功!",
                type:"success"
            }); 
            // 保存token值到localStorage中
            localStorage.setItem("x-auth-token",res["x-auth-token"]);
            // 登录状态的切换 (隐藏登录按钮展示购物车按钮, 用户名昵称头像)
            this.chanIsLogined(true);

            // 清除浏览器地址栏上面的code
            this.$router.push(this.$route.path);

            // console.log(res);

            // 登录成功之后,发送获取用户信息的请求
            this.asyncChanUserInfo();
     
          }else if(res.code==400){
            // code过期的情况
            // 提示用户重新扫码
            this.asyncChanIsShowToast({
              msg:"二维码已经失效,请重新扫码登录",
              type:"danger"
            });
            // 把登录模态窗口打开
            this.chanIsShowLoginModal(true);
          }else if(res.code==407){
            // 用户的微信还没有在这个网站上绑定手机
            // 让用户绑定手机就行
            // 怎么绑定手机?? 用手机号登录并携带uuid,后端会自动绑定
            // console.log(res);
            this.asyncChanIsShowToast({
              msg:"请使用手机号绑定登录微信!",
              type:"warning"
            });
            // 把登录模态窗口打开
            this.chanIsShowLoginModal(true);
            // 保存uuid
            localStorage.setItem("uuid",res.uuid);
          }

          
      }else{
        // 没有code的情况 ??   用户没有登录的操作,或者用户本身就已经登录了的
        let mytoken = localStorage.getItem("x-auth-token");
        this.chanIsLogined(Boolean(mytoken));
        if(mytoken){
          // 有登录的情况, 要发送获取用户信息的请求
          // ????登录过后,关闭浏览器,重新打开浏览器
          this.asyncChanUserInfo();
        }else{
          // 没有登录的情况
          this.initUserInfo();
        }
      }
    });
      
 
    

  },
  computed:{
    ...mapState({
      isLogined:state=>state.loginStatus.isLogined,
      cartTotal:state=>state.userInfo.cartTotal,
      userInfo:state=>state.userInfo.userInfo,
    })
  },
  methods:{
    ...mapMutations({
      chanIsShowLoginModal:"showLoginModal/chanIsShowLoginModal",
      chanIsShowToast:"showToast/chanIsShowToast",
      chanIsLogined:"loginStatus/chanIsLogined",
      initUserInfo:"userInfo/initUserInfo"
    }),
    ...mapActions({
      asyncChanIsShowToast:"showToast/asyncChanIsShowToast",
      asyncChanUserInfo:"userInfo/asyncChanUserInfo",

    }),
    toLogin(){
      // 展示登录模态窗口,本质上修改Vuex中的 isShowLoginModal的值变成true
      this.chanIsShowLoginModal(true)
    },
    toShowToast(){
      // 封装的思路:
      // 调用者需要什么功能
      // 才去封装的内部写逻辑
      // 让调用尽可能简单

      // 显示与否  true 仅仅之决定了一个显示属性
      // 提示文本  "登录成功"
      // 提示类型  "sucess"   "wraning"  "danger"
      // 想要给用户提示,就展示提示框
      this.asyncChanIsShowToast({
          msg:"登录成功~~~!!!",
          type:"warning"
      }); 

      
    }
  }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/css/global.less";
  .top-bar{
    height: 40px;
    background: #242B39;
    color: #FFFEFE;
    line-height: 40px;
    .top-bar-wrap{
      /* background-color: pink; */
      height: 40px;
      display: flex;
      justify-content: space-between;
      /*字体样式 */
      font-size: 14px;
      font-family: SourceHanSansSC;
      font-weight: 300;
      color: #FFFEFE;
      .r{
        ul{
          display: flex;
          li{
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-left: 20px;
            .avatar{
              border-radius: 50%;
              margin-right: 6px;
            }

            &.login-btn{
              width: 124px;
              height: 40px;
              background: @base-color;
              justify-content: center;
            }
          }
        }
      }
    }

  }

.cart-btn{
  width: 124px;
  height: 40px;
  background: @base-color;
  justify-content: center;
  img{
    margin-right: 6px;
  }
  b{
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin-left: 6px;
    background-color: #f40;
    text-align: center;
    border-radius: 50%;
  }
}
  
</style>